<!--
 * @Author: dongdong.wu
 * @Date: 2020-07-01 15:54:01
 * @LastEditTime: 2022-03-09 09:57:24
 * @FilePath: \ncim_web\src\components\weComponents\weDialog.vue
 * @Description:弹出框
 * 详细参数扩展：https://element.faas.ele.me/#/zh-CN/component/dialog
 * 系统统一化，编辑和详情都用弹出框，减少路由的维护
-->
<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :destroy-on-close="destroyOnClose || false"
      :custom-class="customClass + cuClass"
      :visible="show"
      :width="width"
      :modal-append-to-body="modalAppendToBody"
      :append-to-body="appendToBody"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :fullscreen="fullscreen"
      :signout="signout"
      :show-close="canclShow"
      @close="close"
      @Logout="Logout"
    >
      <template #title>
        <div class="dialog-title">
          <span>{{ title }}</span>
          <div class="ele-dialog_btns">
            <el-button
              v-if="fullscreen && hasIconBtn"
              :icon="btnIcon"
              :type="btnIcon ? 'text' : btnType"
              @click="handleClick"
              >{{ btnTitle }}
            </el-button>
            <slot name="btn" />
          </div>
        </div>
      </template>
      <slot />
       <el-backtop target=".el-dialog__body" :bottom="20" :visibility-height="100">
      <div class="upto">
        <i class="el-icon-top" />
      </div>
    </el-backtop>
<!--      <el-backtop-->
<!--        target=".el-dialog__body"-->
<!--        :bottom="20"-->
<!--        :visibility-height="100"-->
<!--      >-->
<!--        <div class="upto">-->
<!--          <i class="welink welink-backtop" title="回到顶部" />-->
<!--        </div>-->
<!--      </el-backtop>-->
      <template v-if="footerVisible" #footer>
        <div>
          <el-button v-if="signout == true" type="primary" @click="Logout"
            >退出登录</el-button
          >
          <el-button v-if="confirmShow && canclShow" @click="close"
            >取 消</el-button
          >
          <el-button v-if="confirmShow" type="primary" @click="confirm">{{
            confirmText
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "WeDialog",
  props: {
    title: {
      // 弹出框标题
      type: String,
      default: ""
    },
    show: {
      // 控制显示与否
      type: Boolean,
      default: false
    },
    width: {
      // 宽度
      type: String,
      default: "60%"
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      // 是否为全屏
      type: Boolean,
      default: false
    },
    canclShow: {
      // 取消按钮是否显示
      type: Boolean,
      default: true
    },
    signout: {
      // 退出按钮是否显示
      type: Boolean,
      default: false
    },
    confirmShow: {
      // 是否显示确定取消按钮
      type: Boolean,
      default: true
    },
    confirmText: {
      // 按钮(一般为详情和编辑新增的时候)
      type: String,
      default: "确定"
    },
    top: {
      type: String,
      default: "10vh"
    },
    // dialog头部按钮，当全屏时，底部按钮取消，头部按钮显示
    btnType: {
      // 按钮还是图标，按钮primary，default，图标：text(显示了btnIcon。则btnType默认text)
      type: String,
      default: "text"
    },
    btnTitle: {
      // 按钮或图标文字
      type: String,
      default: "保存"
    },
    btnIcon: {
      // 图标class
      type: String,
      default: "welink welink-save"
    },
    hasIconBtn: {
      // 全屏下是否显示按钮
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      // 遮罩是否插入到body。默认不插入body。不然会造成返回键，遮罩依然存在的问题
      type: Boolean,
      default: false
    },
    isHeightMax: {
      // 是否设置固定高度为100%, 默认不设置，默认是动态根据内容去获取高度
      type: Boolean,
      default: false
    },
    cuClass: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      customClass: this.isHeightMax
        ? "we-dialog_wrap dialog-height"
        : "we-dialog_wrap"
    };
  },
  computed: {
    footerVisible() {
      // 不存在确定按钮时，footer直接去除
      return !this.fullscreen && this.confirmShow;
    }
  },
  methods: {
    close() {
      // 关闭
      this.$emit("update:show", false);
      this.$emit("close");
    },
    confirm() {
      // 确定
      this.$emit("confirm");
    },
    handleClick() {
      // 点击头部按钮
      this.$emit("confirm");
    },
    Logout() {
      this.$emit("Logout");
    }
  }
};
</script>
<style></style>
<style lang="scss" scoped>
.dialog-height {
  height: 80vh;
}
.we-dialog_wrap {
  .dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    padding: 0px 30px 0px 0px;
    .ele-dialog_btns {
      display: flex;
    }
    .el-button {
      min-width: 70px;
      padding: 0px !important;
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #e8eaeb;
    padding: 10px 15px;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
}
::v-deep {
  .we-dialog_wrap {
    border-radius: 10px;
  }
  .el-dialog__body {
    padding: 20px !important;
  }
  .el-dialog__header {
    position: relative;
    padding: 12px 15px;
    color: #000000;
    background-color: #f0f2f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .el-dialog__headerbtn {
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
